<!DOCTYPE html>
<html>

<head>
    <title>学生信息管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App  -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">

 <!-- 引入vue框架 -->
 <script src="../lib/js/vue.js"></script>
 <!-- 引入axios库 -->
 <script src="../lib/js/axios.js"></script>
 <!-- 引入config -->
 <script src="../lib/js/config.js"></script>





    <style>
        /*头像大小 */
        .avatar-preview {
        width: 200px;
        height: 200px;
        object-fit: cover; /* 确保图片按比例缩放 */
        }
        /* 设置圆角 */
        .rounded-circle {
        border-radius: 50%;
        }

        body.flat-blue {
            /* background: linear-gradient(135deg, #6dd5ed, #2193b0); */
            color: #333;
        }

        .card-header {
            background: #fff;
            padding: 15px;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card-body {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        button {
            transition: all 0.3s ease;
        }

        button:hover {
            transform: scale(1.05);
        }

        .form-control.rounded-pill {
            border-radius: 20px;
            /* 你可以根据需要调整这个值 */
        }
    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li>用户管理</li>
                            <li class="active">个人信息管理</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i
                                                    class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge success">1</span> <i class="fa fa-check icon"></i>
                                                new orders
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge danger">2</span> <i class="fa fa-comments icon"></i>
                                                customers messages
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false">Emily Hart <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i>
                                                Profile</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
                                                Logout</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-paper-plane"></div>
                                <div class="title">大学生信息管理系统</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="../html/index.html">
                                    <span class="icon fa fa-tachometer"></span><span class="title">首页</span>
                                </a>
                            </li>
                            <li class="active panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-desktop"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="./personalInformation.html">个人信息管理</a></li>
                                            <li><a href="./viewCourse.html">查看课程</a></li>
                            </li>
                        </ul>
                    </div>
            </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-table">
                    <span class="icon fa fa-table"></span><span class="title">学生管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-table" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="table/studentInformationManage.html">学生信息管理</a>
                            </li>
                            <li><a href="table/selectCourse.html">学生选课管理</a>
                            </li>
                            <li><a href="table/deleteCourse.html">学生退课管理</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-form">
                    <span class="icon fa fa-file-text-o"></span><span class="title">班级管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-form" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./form/class.html">班级管理</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#component-example">
                    <span class="icon fa fa-cubes"></span><span class="title">课程管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="component-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="components/course.html">课程管理</a>
                            </li>
                          <!--  <li><a href="../components/chartjs.html">Chart.JS</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-example">
                    <span class="icon fa fa-slack"></span><span class="title">成绩管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./score.html">学生查看个人成绩</a>
                            </li>
                            <li><a href="./scoreManagement.html">老师添加成绩、修改成绩</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-icon">
                    <span class="icon fa fa-archive"></span><span class="title">系统管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-icon" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./log.html">日志管理</a>
                            </li>
                         <!--  <li><a href="../icons/font-awesome.html">Font Awesomes</a>
                            </li>--> 
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="../license.html">
                    <span class="icon fa fa-thumbs-o-up"></span><span class="title">License</span>
                </a>
            </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
        </nav>
    </div>
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">

            <div class="row">


                <div class="col-md-4">
                    <!-- 首页 -->
                    <a href="../index.html">
                        <img src="../home.png" alt="">返回首页
                    </a>

                    <!-- 设置图标大小 -->
                    <style>
                        img {
                            width: 30px;
                            height: 30px;
                        }
                    </style>
                </div>





            </div>
            <div class="col-xs-12">
                <div class="card-header">
                    <div class="card-title">
                        <div class="title" style="font-size: large; font-weight: bold;">个人信息</div>
                    </div>
                </div>

                <div class="card-body" id="personalInformation">
                    <!-- <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <label for="avatar" class="form-label">头像</label>
                            <div class="d-flex align-items-center">
                                <img id="avatarPreview" :src="user.userAvatar" alt="头像预览"
                                     class="rounded-circle me-3 border border-secondary avatar-preview">
                                <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*"
                                       onchange="previewAvatar(event)" style="display: none;">
                            </div>
                        </div>
                    </div> -->
                
                    <!-- Modal -->
                    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editModalLabel">编辑个人信息</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form id="editProfileForm">
                                        <div class="mb-3">
                                            <label for="editUserId" class="form-label">ID</label>
                                            <input type="text" class="form-control rounded-pill" id="editUserId" name="editUserId" required v-model="user.userId" readonly>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editUserAccount" class="form-label">用户名</label>
                                            <input type="text" class="form-control rounded-pill" id="editUserAccount" name="editUserAccount" required v-model="user.userAccount">
                                        </div>
                                        <div class="mb-3">
                                            <label for="editUserEmail" class="form-label">电子邮件</label>
                                            <input type="email" class="form-control rounded-pill" id="editUserEmail" name="editUserEmail" required v-model="user.userEmail">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary rounded-pill" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary rounded-pill" @click="saveProfile">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>



                    <form id="profileForm" style="margin-top: 20px;">
                        <div class="mb-3">
                            <label for="userId" class="form-label">id</label>
                            <input type="text" class="form-control rounded-pill" id="userId" name="userId" required  v-model="user.userId" readonly>
                        </div>
                        <!-- <div class="mb-3">
                            <label for="userName" class="form-label">姓名</label>
                            <input type="text" class="form-control rounded-pill" id="userName" name="userName" required  v-model="user.userName">
                        </div> -->
                        <div class="mb-3">
                            <label for="userAccount" class="form-label">用户名</label>
                            <input type="text" class="form-control rounded-pill" id="userAccount" name="userAccount" required  v-model="user.userAccount">
                        </div>
                        <div class="mb-3">
                            <label for="userEmail" class="form-label">电子邮件</label>
                            <input type="email" class="form-control rounded-pill" id="userEmail" name="userEmail" required v-model="user.userEmail">
                        </div>
                        <!-- <div class="mb-3">
                            <label for="userRole" class="form-label">权限</label>
                            <input type="tel" class="form-control rounded-pill" id="userRole" name="userRole" >
                        </div> -->
                    </form>
                    <div>
                        <!-- <button id="editProfileButton" class="btn btn-warning rounded-pill" @click="editProfile">修改</button> -->
                        <button id="saveProfileButton" class="btn btn-success rounded-pill"
                            style="display: none;" @click="saveProfile">保存</button>
                        <button id="cancelProfileButton" class="btn btn-danger rounded-pill"
                            style="display: none;" @click="cancelProfile">取消</button>
                    </div>
                </div>
            </div>



            <footer class="app-footer">
                <div class="wrapper">
                    <span class="pull-right" style="text-align: center;">2.1 <a href="#"><i
                                class="fa fa-long-arrow-up"></i></a></span> © 2024-12-LUT-PRACTICE
                </div>
            </footer>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
            <script>

            var personalInformation = new Vue({
            el: '#personalInformation',
            data: {
                user: {
                    userId: '', // 假设用户ID为1，实际应用中应从后端获取
                    userAccount:'',
                    userPassword: '',
                    userEmail: '',
                    userRole: ''
                },
            
            
            },
            mounted() {
                // this.userAccount = localStorage.getItem('userAccount');
                // this.fetchUserData(this.user.userId);
                this.queryUserInfo();
            },
            methods: {
            queryUserInfo() {
                axios.get('/user/selectUserByAccount/' + localStorage.getItem('userAccount'))
                    .then(response => {
                        this.user = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取用户信息失败:', error);
                    });
            },
            editProfile() {
                $('#editModal').modal('show');
            },
            saveProfile() {
                // 保存逻辑
                axios.post('/user/updateUser', this.user)
                    .then(response => {
                        console.log('用户信息更新成功:', response.data);
                        $('#editModal').modal('hide');
                        this.queryUserInfo(); // 刷新用户信息
                    })
                    .catch(error => {
                        console.error('更新用户信息失败:', error);
                    });
            },
            cancelProfile() {
                // 取消逻辑
                this.queryUserInfo(); // 刷新用户信息
            }
        }
    });
   
            </script>








            <!-- Javascript Libs -->
            <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
            <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
            <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>

            <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
            <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
            <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
            <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
            <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
            <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
            <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
            <!-- Javascript -->
            <script type="text/javascript" src="../js/app.js"></script>


</body>

</html>